const createHighlightLayer = `
    (function()
    {
        let layer = document.getElementById('highlight-layer') ;
        if(!layer)
        {
            console.log('creating layer');
            layer = document.createElement('div');
            layer.id = 'highlight-layer';
            Object.assign(layer.style, {
            position: 'fixed',
            top: '0',
            left: '0',
            width: '100vw',
            height: '100vh',
            pointerEvents: 'none',
            zIndex: '2147483647'
            });
            document.body.appendChild(layer);
            console.log('done') ;
        }
    })
`
const highlightElements =`
    (function(elements, createNumberInCorner)
    {
        let layer = document.getElementById('highlight-layer');
        while (layer.firstChild) layer.removeChild(layer.firstChild);

        const colors = [
        'rgba(255, 0, 0, 0.05)', 
        'rgba(0, 0, 255, 0.05)', 
        'rgba(128, 0, 128, 0.05)',
        'rgba(255, 192, 203, 0.05)', 
        'rgba(0, 128, 0, 0.05)',
        'rgba(255, 255, 0, 0.05)'
        ];

        function highlight({boundingBox: {x, y, width, height}}, number, color)
        {
            const box = document.createElement('div') ;
            box.style.position = 'absolute';       
            box.style.left = \`\${x}px\`;             
            box.style.top = \`\${y}px\`;             
            box.style.width = \`\${width}px\`;        
            box.style.height = \`\${height}px\`;      
            box.style.border = '2px solid red';    
            box.style.backgroundColor = color;
            box.style.pointerEvents = 'none'; 
            box.appendChild(createNumberInCorner(number)) ;
            return box;
        }
        for(let i = 0; i<elements.length; i++) layer.appendChild(highlight(elements[i],i,colors[i%6])) ;
    })
`
const createNumberInCorner = `
    (function(number)
    {
        const numberLabel = document.createElement('span') ;
        numberLabel.textContent = number ;
        numberLabel.style.position = 'absolute';
        numberLabel.style.top = '2px';
        numberLabel.style.right = '4px';
        numberLabel.style.pointerEvents = 'none';
        numberLabel.style.color = 'white';
        numberLabel.style.fontSize = '0.7em';
        numberLabel.style.backgroundColor = 'black'
        return numberLabel ;
    })
`

export class highlightsUtils
{
    static getCreateNumberInCornerFunctionString()
    {
        return createNumberInCorner;
    }

    static getHighlightElementFunctionString()
    {
        return highlightElements ;
    }

    static getCreateHighlightLayerFunctionString()
    {
        return createHighlightLayer ;
    }
}